<template>
	<view class="card" @click="cardClick">
		<view class="title">
			<view class="title_L">
				<text>暂停维保电梯总览</text>
			</view>
		</view>
		<view class="info-view">
			<view class="info-view-item">
				<view class="num">
					{{ loseData.loseEleTotal }}
					<text>台</text>
				</view>
				<view class="name">已暂停维保电梯</view>
			</view>
			<view class="info-view-line"></view>
			<view class="info-view-item">
				<view :class="['num', loseData.notDelPlanTotal != 0 ? '' : 'grey']">
					{{ loseData.notDelPlanTotal }}
					<text>台</text>
				</view>
				<view class="name noClear">
					<view>未清除剩余排期</view>
					<zb-tooltip arrowLeft="-180" placement="bottom-end" ref="tooltip">
						<image class="msg" src="@/static/images/index/q.png"></image>
						<view class="tipsContent" slot="content">
							<view class="">已暂停维保电梯在今日及往后日期仍存在排期计划，</view>
							<view class="">且尚未清除。</view>
						</view>
					</zb-tooltip>
				</view>
				<view class="download" @click.stop="showUploadFile(3,)" v-if="loseData.notDelPlanTotal != 0">
					<image src="@/static/images/download.png" mode="" />
					<view>下载数据</view>
				</view>
			</view>
		</view>
		<view class="charts">
			<l-echart class="ring" ref="d3" id="elevator_d3"></l-echart>
		</view>
		<view v-if="loseData.loseEleTotal" @click="toElevatorList"
			style="color: #0091FF;text-align: right;position: absolute;right: 40rpx;bottom: 60rpx;">
			详情<uni-icons color="#0091FF" type="forward" size="14"></uni-icons>
		</view>
		<model :maskClick="false" width="508rpx" :visible="successVisible" title="下载成功" cancleTxt="复制链接"
			comfireTxt="直接打开" @cancle="modelRes(1)" @comfire="modelRes(2)" @close="successVisible = false">
			<view class="modelItem"> 你可以直接打开，或者复制链接至 </view>
			<view class="modelItem"> 电脑端浏览器下载。 </view>

		</model>
	</view>
</template>
<script>
import * as echarts from '@/subpages/components/lime-echart/static/echarts.min';
import { ringDashboard } from '../utils/chart_opt.js';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import { getLose, getLoseExcel } from '@/apis/statistic.js';
import model from '@/components/model/index.vue';
export default {
	name: 'contractTotal',
	components: {
		LEchart,
		model
	},
	data() {
		return {
			d3: {},
			downloadUrl: '',
			localPath: '',
			// 下载成功之后弹出框
			successVisible: false,
			// 暂停维保电梯总览数据
			loseData: {},
		};
	},
	props: {},
	created() {
		this.getLose();
	},
	mounted() {

	},
	methods: {
		toElevatorList() {
			uni.navigateTo({
				url: '/subpages/statistics/elevatorList?type=6',
			});
		},
		cardClick() {
			this.$refs.tooltip.close();
		},
		// 下载成功之后
		modelRes(type) {
			if (type == 1) {
				// 复制
				uni.setClipboardData({
					data: this.downloadUrl,
					success: () => {

					},
				});
				this.successVisible = false;
			} else {
				// #ifdef H5
				// eslint-disable-next-line no-undef
				sida.openUrl({ url: this.downloadUrl });
				// #endif

				// 直接打开

				// #ifndef H5
				uni.openDocument({
					filePath: this.localPath,
					showMenu: true,
					fileType: 'xlsx',
					success: () => {
						console.log('打开文档成功');
					},
					fail: (err) => {
						console.log(err);
					},
				});
				// #endif
				this.successVisible = false;
			}
		},
		// 暂停维保电梯总览
		getLose() {
			getLose({}).then(res => {
				this.loseData = res.data;
				// 绘制
				this.d3.opts = ringDashboard({
					notDelPlanPct: res.data.notDelPlanPct,
					name: '暂停维保梯剩余排期清除进度'
				});
				this.$nextTick(() => {
					if (this.$refs['d3']) {
						this.$refs['d3'].init(echarts, (chartF) => {
							chartF.setOption(this.d3.opts);
						});
					}
				});
			});
		},
		// 下载数据
		showUploadFile() {
			uni.showLoading({
				title: '下载中',
				icon: 'none',
			});
			getLoseExcel({}).then(res => {
				this.downloadUrl = res.data;
				this.submitPlan(res.data);
			});
		},
		// 下载文件
		submitPlan(url) {
			// #ifndef H5
			uni.hideLoading();
			// #endif

			// #ifdef H5
			let str = url.split('/')[url.split('/').length - 1];
			uni.downloadFile({
				url,
				filePath: wx.env.USER_DATA_PATH + '/' + str,
				success: (res) => {
					console.log(res, '下载的文件');
					if (res.statusCode === 200) {
						uni.hideLoading();
						this.localPath = res.filePath;
						this.successVisible = true;
						uni.hideLoading();
					}
				},
				fail: () => {
					uni.hideLoading();
				},
			});
			// #endif
		},
	}
};
</script>

<style lang="scss" scoped>
@import './stat.scss';

.card {
	height: 600rpx;
	overflow: hidden;
}

.charts {
	width: 100%;

	.ring {
		width: 500rpx !important;
		margin: 0 auto;
		margin-top: 10%;
	}
}

.info-view {
	background: none;
	align-items: flex-start;
	padding-top: 20rpx;
	background-image: none !important;
}

.tipsContent {
	text-align: left;
}

.noClear {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>